<template>
  <!-- 新增和删除 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogShow"
    width="650px"
    @closed="closedDialog"
  >
    <!-- 绘制表单 -->
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width: 440px" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width: 440px" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="formData.manager"
          style="width: 440px"
          placeholder="请选择"
          @focus="getEmployeeDate"
        >
          <!-- 下拉框中的 label用来指定显示的字段，value 指的是将数据给v-model绑定的变量-->
          <el-option
            v-for="(item, index) in managerList"
            :key="index"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="formData.introduce"
          style="width: 440px"
          rows="3"
          type="textarea"
        />
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        <el-button size="small" @click="dialogShow = false">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  getDepartmentListApi,
  addDepartmentApi,
  getDepartmentInfoApi,
  editDepartmentApi
} from '@/api/department'
import { getEmployeesSimpleApi } from '@/api/employees'
export default {
  name: '',
  data() {
    // 一 . 部门名称的查重校验 (调接口请求到部门数据)
    const checkNameRepeat = async (valid, value, cb) => {
      // 1.找到所有的部门名称，  depts是包含所有的部门信息
      const { depts } = await getDepartmentListApi()

      // 2.找到当前部门的兄弟部门，arr里存的是所有的兄弟部门(同一个父级)
      let arr = depts.filter((item) => {
        // item.pid是每个部门的pid，this.formData.pid是父级的id
        return item.pid === this.formData.pid
      })
      // 如果是在编辑状态下，还要排除自己
      if (this.formData.id) {
        arr = arr.filter((item) => item.id !== this.formData.id)
      }

      // 3.名称查重，判断输入的名称是不是和其他兄弟部门名称重复了，返回的是布尔值
      const isRepeat = arr.some((item) => {
        // item.name是每个子级的部门名称
        return item.name === value
      })

      // 4.根据返回的true/false判断校验是否通过，fasle为没有重复的名字(通过)
      isRepeat ? cb(new Error('名称重复了')) : cb()
    }

    // 二. 编码查重校验
    const checkCodeRepeat = async (valid, value, cb) => {
      // 1.找到所有的部门名称，  depts是包含所有的部门信息
      let { depts } = await getDepartmentListApi()
      // 如果是在编辑状态下，还要排除自己
      if (this.formData.id) {
        depts = depts.filter((item) => item.id !== this.formData.id)
      }
      // 2.编码查重，判断输入的编码是不是和其他部门编码重复了，返回的是布尔值
      const isRepeat = depts.some((item) => {
        // item.name是每个子级的部门名称，value是我们输入的内容
        return item.code === value
      })

      isRepeat ? cb(new Error('编码重复了')) : cb()
    }

    return {
      // 控制新增和修改的弹窗
      dialogShow: false,
      // 表单验证规则
      formRules: {
        code: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { validator: checkCodeRepeat, trigger: 'blur' }
        ],
        introduce: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        manager: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { validator: checkNameRepeat, trigger: 'blur' }
        ]
      },
      // 表单数据
      formData: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      // 负责人数据
      managerList: []
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  methods: {
    // 获取负责人数据
    async getEmployeeDate() {
      this.managerList = await getEmployeesSimpleApi()
    },

    // 提交表单的事件逻辑
    async btnOk() {
      // this.$refs.form就是获得的就是表单组件，包含了这个组件所有的信息
      //   console.log(this.$refs.form)
      // 1.表单数据的校验方法   this.$refs.form.validate()是个Promise对象
      try {
        await this.$refs.form.validate()
      } catch (err) {
        console.log(err)
      }
      // 2.发请求  添加/修改部门
      if (this.formData.id) {
        await editDepartmentApi(this.formData)
        // 3.提示成功
        this.$message.success('修改成功')
      } else {
        await addDepartmentApi(this.formData)
        // 3.提示成功
        this.$message.success('添加成功')
      }

      // 4.更新列表(让父组件再获取一下数据)
      this.$emit('updateList')
      // 5.关闭弹窗
      this.dialogShow = false
    },
    // 关闭弹框
    closedDialog() {
      // 清空表单数据
      this.formData = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }

      // 移出校验的方法  clearValidate()
      //   console.log(this.$refs.form)
      this.$refs.form.clearValidate()
    },

    // 获取表单数据的回显
    async getFormDateInfo(id) {
      // 请求数据，给表单赋值，回显数据
      this.formData = await getDepartmentInfoApi(id)
      // 打开弹框
      this.dialogShow = true
    }
  }
}
</script>

<style></style>
